<template>
	<view style="width: 100%;padding: 0 40rpx 40rpx 40rpx;clear: both;">
		<u-form ref="uForm" :model="formData" label-width="200" label-position="top">
			
			<template>
				<u-form-item :label="$t(desire_speed.label)" :label-style="labelStyle"
					:required="desire_speed.required">
					<u-input v-model="formData[desire_speed.key]" type="digit" :placeholder="$t(desire_speed.placeholder)"
						:placeholder-style="placeholderStyle" :value="desire_speed.value ? desire_speed.value : ''" />
				</u-form-item>
			</template>
			
			<template>
				<formPortCity :item="departure_city" :postid="postid" :postcity="postcity"  @change="selCity" />
			</template>
			
			<template>
				<actionSheets :item="pay_type" :postfkfs="postfkfs" @change="selActionSheet" />
			</template>
			
			<template>
				<formRadios :item="is_express_price" :postyf="postyf" @change="selRadio" />
			</template>
				
		</u-form>
		
		<u-popup v-model="show">
			<view style="width: 90%;margin-left:5%; margin-top: 60rpx; line-height: 36rpx; text-align: center; font-size: 32rpx;font-weight: bold;">{{ $t(explainTitle)||'' }}</view>
			<view style="width: 90%;margin-left:5%; margin-top: 20rpx; line-height: 36rpx; text-align: center; font-size: 28rpx;">{{ $t(explain)||'' }}</view>
			<button @click="guanbi" style="margin-top: 50rpx;width: 80%;">
				{{$t('关闭')}}
			</button>
		</u-popup>
		
		
	</view>
</template>

<script>
	/**
	 * 表单构建组件
	 * @author zhp
	 * @params name string 表单名
	 * @params label string 文字提示
	 * @params type string 表单类型 input,select,radio,images,files,city,goods_type_select,actionSheet,digit
	 * @params required bool 是否必填，默认true，此处只用户判断是否显示 *
	 * @params rules {} 校验规则
	 * @params details [] 详情数据，select,radio等类型使用
	 */
	import actionSheets from "../components/actionSheets.vue";
	
	import formRadios from "../components/formRadios.vue";
	import formImages from "../components/formImages.vue";
	import formVideos from "../components/formVideos.vue";
	import formCity from "../components/formCity.vue";
	import formCity2 from "../components/formCity2.vue";
	
	import formPortCity from "../components/formPortCity.vue";
	import formPicker from "../components/formPicker.vue";
	import formSelect from "../components/formSelect.vue";
	import formCheckBox from "../components/formCheckBox.vue";

	export default {
		components: {
			actionSheets,
			formRadios,
			formImages,
			formCity,
			formCity2,
			formPicker,
			formSelect,
			formCheckBox,
			formPortCity,
			formVideos
		},
		props: {
			formItems: {
				type: Array,
				default: [],
				required: true
			},
			// select_city_new:{
			// 	type: Array,
			// 	default: [],
			// 	required: false
			// },
			// select_city_newd:{
			// 	type: Array,
			// 	default: [],
			// 	required: false
			// },
			// 表单数据
			value: {
				type: [Array,Object],
				required: true
			},
			postcity:{
				type: [Array,Object,Number,String],
				default:''
			},
			postfkfs:{
				type: [Array,Object,Number,String],
				default:''
			},
			postyf:{
				type: [Array,Object,Number,String],
				default:''
			},
			postid:{
				type: [Array,Object,Number,String],
				default:''
			}
		},
		data() {
			return {
				errorMessage: '',
				sel_list1:[],
				sel_list2:[],
				show:false,
				explainTitle:'',
				explain:'',
				is_margin_show:1,
				labelStyle: {
					'word-break': 'break-all',
				},
				lang: getApp().globalData.lang,
				formData: {},
				placeholderStyle: "text-align: left;margin-left:3%;margin-top:3%;",
				textareaStyle: {
					// padding: "20rpx",
					height: "400rpx"
				},
				desire_speed:{
					key: "desire_speed",
					label: "生产时间（天）",
					placeholder: "请输入数字",
					type: "number",
					required: true,
					value: "",
					rules: {},
				},
				departure_city:{
					key: "departure_city",
					label: "发货地",
					placeholder: this.$t("请选择"),
					type: "port_city",
					required: true,
					value: [],
					rules: {},
				},
				pay_type:{
					key: "pay_type",
					label: "付款方式",
					placeholder: "预付全款",
					type: "actionSheet",
					required: true,
					value: {
						pid: 0,
						value: 1,
						text: '预付全款',
						level: 1,
						type: 'pay_type',
					},
					rules: {},
				},
				is_express_price:{
					key: "is_express_price",
					label: "是否含运费",
					placeholder: "",
					type: "radio",
					required: true,
					value: "1",
					rules: {},
				}
			}
		},
		mounted() {
			// console.log('buildForm-mounted-index formItems', this.formItems)
			// console.log('buildForm-mounted-index value', this.value)
			// console.log('buildForm-mounted-index formData', this.formData)
			
			this.formData = this.value
		},
		watch: {
			formData: {
				handler(val) {
					this.$emit('input', val)
				},
				deep: true,
			},
			formItems: {
				handler(val) {
					this.formItems = val
				},
			}
		},
		methods: {
			//切换货物所在地 分类id
			change(id) {
				this.classCurrent = id
				this.GoodsList()
			},
			checkAmount(event) {
			  const value = event;
			  const regex = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/; // 正则表达式，匹配最多有两位小数的金额数字
			  if (!regex.test(value)) {
				this.$u.toast(this.$t('请输入正确的金额格式!'));
			  }
			},
			selActionSheet(key, value,list) {  
				console.log({'key':key,'value':value,'list':list})
				this.formData[key] = value
				this.sel_list1 = list	
				this.$emit('changeActionSheet', value,this.sel_list1,key)
			},
			selActionSheet2(key, value,list) {
				console.log({'key':key,'value':value,'list':list})
				this.formData[key] = value
				this.sel_list2 = list
				this.$emit('changeActionSheet2', value,this.sel_list2,key)
			},
			guanbi(){
				this.show=false
			},
			selImages(key, value) {
				console.log(value);
				this.formData[key] = value
			},
			selVideos(key, value) {
				this.formData[key] = value
			},
			selCity(key, value) {
				this.formData[key] = value
			},
			selRadio(key, value) {
				
				if(key=='is_margin'){
					if(value=='1'){
						this.is_margin_show=1
					}else{
						this.is_margin_show=2
					}
				}
				
				this.formData[key] = value
			
			
			},
			clickIcon(item) {
				if (item.explain) {
					let me = this;
					// uni.showModal({
					// 	title: me.$t(item.explainTitle),
					// 	content: me.$t(item.explain),
					// 	showCancel: false,
					// 	confirmText: "ok"
					// })
					
					me.explainTitle = item.explainTitle
					me.explain = item.explain
					
					me.show=true
				}
			}
		}
	}
</script>

<style lang="scss">
	.nav_z{
		width: 80%;height:50rpx;display: flex;position: absolute;top: 15rpx; left: 20%;
	}
	.tab_nav{ width: 23%;margin:0 1%; line-height: 50rpx;text-align: center;border-radius: 10rpx;   color: #606266;font-size: 24rpx ;background-color: rgb(237, 237, 237);padding:1% 0 ;}
	.tabnav_ru{width: 23%;margin:0 1%;line-height: 35rpx; text-align: center;border-radius: 10rpx;   color: #606266;font-size: 18rpx ;background-color: rgb(237, 237, 237);padding:1% 0 ;}
	
	.tab_nav_on{ color: #fff !important;background-image: linear-gradient(to right, #ffd234, #ff884d) !important;}
</style>